<template>
  <div class="card page-project-list pages"
       id="projectProcess">
    <div class="page-search">
      <a-form class="form-inline"
              :form="searchForm">

        <a-form-item label="时间范围">
          <a-range-picker v-decorator="['project']" />
        </a-form-item>
        <a-form-item label="采购状态">
          <a-select :options="approvalStateDict"
                    v-decorator="['approvalState']"
                    placeholder="请选择" />
        </a-form-item>
        <a-form-item label="完成状态">
          <a-select v-decorator="['multiple']"
                    mode="multiple"
                    :options="approvalStateDict"
                    placeholder="多选" />
        </a-form-item>
        <a-form-item class="search-buttons">
          <a-button type="primary"
                    v-click='{func:handleSearch,time:1000}'>查询</a-button>
          <a-button @click="handleReset">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <!-- 表格 -->
    <a-button v-if="rowSelection"
              v-click='{func:clearSelected,time:1000}'>清空</a-button>
    <standard-table ref="tableChildren"
                    :pagination="PAGINATION"
                    :columns="columns"
                    :bordered=true
                    :rowSelection="rowSelection"
                    :dataSource="dataSource"
                    @change="onChange">
      <span slot="description">
        测试插槽（slot）
      </span>
    </standard-table>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import GlobalMixin from '@/mixins/global'
import { columnsData } from './cloumns.js'
import { StandardTable } from '@/common/components'
import { tableList } from '@/api/table'
export default {
  name: 'ProjectList',
  mixins: [GlobalMixin],
  components: { StandardTable },
  data () {
    this.columns = Object.freeze(columnsData(this.$createElement, this))
    return {
      searchForm: this.$form.createForm(this),
      dataSource: [],
      sortedInfo: null,
      serchParams: { pageNum: 1, pageSize: 10 }, // 搜索条件
      // 是否添加选中
      rowSelection: {
        selectedRowKeys: [1, 2],
        onChange: this.onSelectChange
      }
    }
  },
  computed: {
    ...mapState({
      approvalStateDict: state => state.dict.approvalState
    })
  },
  beforeMount () {
    // 获取字典项
    this.$store.dispatch('dict/fetchDict', 'approvalState')
    this.$store.dispatch('dict/fetchDict', 'a')
    // 获取列表
    this.fetchList()
  },

  methods: {
    // 获取列表
    fetchList () {
      this.serchParams = { ...this.serchParams }
      tableList(this.serchParams).then(res => {
        this.dataSource = res.list || []
        // 处理分页情况
        const { pageNum, pageSize } = this.serchParams
        this.PAGINATION = {
          total: res.total || 0,
          pageNum,
          pageSize
        }
      })
    },
    // 选中
    onSelectChange (selectedRowKeys, selectedRows) {
      console.log(selectedRowKeys)
      console.log(selectedRows)
    },
    // 清空
    clearSelected () {
      this.$refs.tableChildren.clearSelected()
    },
    // 搜索
    handleSearch () {
      this.serchParams = this._getTableParams(this.searchForm, { pageNum: 1 })
      this.fetchList()
    },
    // 切换数据
    onChange (changeParams, sort) {
      this.serchParams = { ...this.serchParams, ...changeParams }
      this.fetchList()
    },
    // 删除
    onDelete (record) {
    },
    // 查看
    showModal (record) {

    },
    // 重置
    handleReset () {
      this.searchForm.resetFields()
      this.serchParams = this._getTableParams(this.searchForm)
      this.fetchList()
    }
  }
}
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
